---
{
	"title": "Égalisation des hauteurs (pure CSS)",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Un plugiel d'égalisation des hauteurs pour les grilles.",
	"tag": "eqht-css",
	"parentdir": "eqht-css",
	"altLangPrefix": "eqht-css",
	"css": ["demo/eqht-css"],
	"dateModified": "2023-07-17"
}
---
<section>
	<h2>Intention</h2>
	<p>Égaliser l'hauteur des éléments sur la même ligne de base.</p>
</section>

<section id="simple">
	<h2>Exemple</h2>
	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 1</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 1</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
				<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à grande hauteur 1</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
				<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
				<p>Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 2</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 2</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
				<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
			</section>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<section>
			<h4>HTML</h4>
			<pre><code>&lt;section id="simple"&gt;
	&lt;h2&gt;Exemple&lt;/h2&gt;

	&lt;div class=&quot;row wb-eqht-grd&quot;&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à basse hauteur 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à hauteur moyenne 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à grande hauteur 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à basse hauteur 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à hauteur moyenne 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>SCSS</h4>
			<pre><code>{{#escape}}{{#stripbanner}}{{> eqht-css }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</section>
</section>

<section id="grow">
	<h2>Exemple remplissage</h2>
	<p><strong>Note&nbsp;:</strong> La dernière rangée divisera toujours vos colonnes proportionnellement afin de remplir la pleine largeur.</p>
	<div class="row wb-eqht-grd grow">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 1</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 1</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
				<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à grande hauteur 1</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
				<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
				<p>Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 2</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 2</h3>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
				<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
			</section>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<section>
			<h4>HTML</h4>
			<pre><code>&lt;section id="grow"&gt;
	&lt;h2&gt;Exemple remplissage&lt;/h2&gt;

	&lt;div class=&quot;row wb-eqht-grd grow&quot;&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à basse hauteur 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à hauteur moyenne 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à grande hauteur 1&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à basse hauteur 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;section&gt;
				&lt;h3&gt;Contenant à hauteur moyenne 2&lt;/h3&gt;
				...
			&lt;/section&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>SCSS</h4>
			<pre><code>{{#escape}}{{#stripbanner}}{{> eqht-css }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</section>
</section>

<section>
	<h2>Exemple imbriqué</h2>

	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 1</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 1</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 2</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 2</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 3</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 3</p>
						<ul>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 4</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 4</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
	<section>
		<h3>Code</h3>
		<pre><code>&lt;section&gt;
	&lt;h2&gt;Exemple imbriqué&lt;/h2&gt;

	&lt;div class="row wb-eqht-grd"&gt;
		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Colonne 1&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Colonne 1&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Colonne 2&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Colonne 2&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Colonne 3&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Colonne 3&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;div class="parent-example hght-inhrt"&gt;
				&lt;section class="panel panel-default hght-inhrt"&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Colonne 4&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Colonne 4&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
	</section>
</section>

<section>
	<h2>Exemple ciblé à un élément imbriqué plus profondément</h2>
	<p>l'exemple suivant fait la même chose que si la classe <code>hght-inhrt</code> serais utilisé à partir de l'élément à égaliser jusqu'à l'enfant immédiat de wb-eqht-grd. Utiliser la classe <code>eqht-trgt</code> seulement sur l'élément à égaliser évite ces duplicatas. Cette version utilise Javascript.</p>
	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 1</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Colonne 1</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Bas de panneau</p>
					</footer>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 2</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Colonne 2</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Bas de panneau</p>
					</footer>
				</section>
			</div>
		</div>

		<div class="col-sm-12 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 3</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Colonne 3</p>
						<ul>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Bas de panneau</p>
					</footer>
				</section>
			</div>
		</div>
	</div>
<section>
		<h3>Code</h3>
		<pre><code>&lt;section&gt;
	&lt;h2&gt;Exemple ciblé à un élément imbriqué plus profondément&lt;/h2&gt;

	&lt;div class=&quot;row wb-eqht-grd&quot;&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Colonne 1&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body eqht-trgt&quot;&gt;
						&lt;p&gt;Colonne 1&lt;/p&gt;
						...
					&lt;/div&gt;
					&lt;footer class="panel-footer"&gt;
						&lt;p class="mrgn-tp-sm mrgn-bttm-sm"&gt;Bas de panneau&lt;/p&gt;
					&lt;/footer&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Colonne 2&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body eqht-trgt&quot;&gt;
						&lt;p&gt;Colonne 2&lt;/p&gt;
						...
					&lt;/div&gt;
					&lt;footer class="panel-footer"&gt;
						&lt;p class="mrgn-tp-sm mrgn-bttm-sm"&gt;Bas de panneau&lt;/p&gt;
					&lt;/footer&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Colonne 3&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body eqht-trgt&quot;&gt;
						&lt;p&gt;Colonne 3&lt;/p&gt;
						...
					&lt;/div&gt;
					&lt;footer class="panel-footer"&gt;
						&lt;p class="mrgn-tp-sm mrgn-bttm-sm"&gt;Bas de panneau&lt;/p&gt;
					&lt;/footer&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
	</section>
</section>
